<template>
  <div class="product-category page-container">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">商品分类管理</h1>
        <p class="page-subtitle">
          管理系统商品分类信息，支持分类的增删改查操作
        </p>
      </div>
      <el-button type="primary" @click="openAddDialog" class="add-btn">
        <el-icon class="btn-icon"><Plus /></el-icon>
        新增分类
      </el-button>
    </div>

    <div class="content-card">
      <div class="search-section">
        <el-input
          v-model="searchForm.name"
          placeholder="搜索分类名称"
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon class="search-icon"><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>

      <el-table
        :data="categoryList"
        style="width: 100%"
        class="category-table"
        v-loading="loading"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :cell-style="{ paddingLeft: '20px' }"
        :header-cell-style="{ paddingLeft: '20px' }"
      >
        <el-table-column
          prop="name"
          label="分类名称"
          width="200"
          min-width="250"
        />
        <el-table-column prop="level" label="层级" width="110">
          <template #default="scope">
            <el-tag
              :type="scope.row.level === 1 ? 'primary' : 'success'"
              size="small"
            >
              {{ scope.row.level === 1 ? "一级分类" : "二级分类" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="80" />
        <el-table-column prop="icon" label="图标" width="120">
          <template #default="scope">
            <span v-if="scope.row.icon">{{ scope.row.icon }}</span>
            <span v-else class="no-icon">无</span>
          </template>
        </el-table-column>
        <el-table-column prop="isShow" label="是否显示" width="120">
          <template #default="scope">
            <el-tag
              :type="scope.row.isShow === 1 ? 'success' : 'danger'"
              size="small"
            >
              {{ scope.row.isShow === 1 ? "显示" : "隐藏" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="modifiedByName" label="修改人" width="120" />
        <el-table-column prop="modifiedTime" label="修改时间" width="180" />
        <el-table-column label="操作" width="380">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="openEditDialog(scope.row)"
              class="action-btn"
            >
              编辑
            </el-button>
            <!-- 一级分类：添加子分类 -->
            <el-button
              size="small"
              type="success"
              @click="openAddSubDialog(scope.row)"
              v-if="scope.row.level === 1"
              class="action-btn"
            >
              添加子分类
            </el-button>
            <!-- 二级分类：详情 -->
            <el-button
              size="small"
              type="info"
              @click="openDetailDialog(scope.row)"
              v-if="scope.row.level === 2"
              class="action-btn"
            >
              详情
            </el-button>
            <!-- 二级分类：隐藏/显示开关 -->
            <el-switch
              v-model="scope.row.isShow"
              :active-value="1"
              :inactive-value="0"
              @change="toggleShow(scope.row)"
              v-if="scope.row.level === 2"
              class="action-switch"
              active-text="显示"
              inactive-text="隐藏"
            />
            <!-- 删除按钮 -->
            <el-button
              size="small"
              type="danger"
              @click="deleteCategory(scope.row)"
              class="action-btn"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.pageIndex"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增分类' : '编辑分类'"
      width="800px"
      class="category-dialog"
      @close="resetForm"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div class="dialog-header">
          <div class="header-icon">
            <el-icon v-if="dialogType === 'add'"><Plus /></el-icon>
            <el-icon v-else><Edit /></el-icon>
          </div>
          <div class="header-content">
            <h3 class="dialog-title">
              {{ dialogType === "add" ? "新增分类" : "编辑分类" }}
            </h3>
            <p class="dialog-subtitle">
              {{ dialogType === "add" ? "创建新的商品分类" : "修改分类信息" }}
            </p>
          </div>
        </div>
      </template>

      <div class="dialog-body">
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="100px"
          class="category-form"
        >
          <!-- 基本信息卡片 -->
          <div class="form-card">
            <div class="card-header">
              <el-icon class="card-icon"><InfoFilled /></el-icon>
              <span class="card-title">基本信息</span>
            </div>
            <div class="card-content">
              <div class="form-row">
                <el-form-item label="分类名称" prop="name" class="form-item">
                  <el-input
                    v-model="form.name"
                    placeholder="请输入分类名称，2~10个字符"
                    class="form-input"
                    clearable
                  />
                </el-form-item>

                <el-form-item
                  label="父级分类"
                  prop="parentId"
                  v-if="dialogType === 'add'"
                  class="form-item"
                >
                  <el-tree-select
                    v-model="form.parentId"
                    :data="parentCategoryOptions"
                    :props="{
                      label: 'name',
                      value: 'id',
                      children: 'children',
                    }"
                    placeholder="请选择父级分类"
                    clearable
                    class="form-input"
                  />
                </el-form-item>
              </div>

              <div class="form-row">
                <el-form-item
                  label="层级"
                  prop="level"
                  v-if="dialogType === 'add' || dialogType === 'addSub'"
                  class="form-item"
                >
                  <el-radio-group v-model="form.level" class="radio-group">
                    <el-radio :label="1" class="radio-item">
                      <el-icon><Folder /></el-icon>
                      一级分类
                    </el-radio>
                    <el-radio :label="2" class="radio-item">
                      <el-icon><FolderOpened /></el-icon>
                      二级分类
                    </el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="排序" prop="sort" class="form-item">
                  <el-input-number
                    v-model="form.sort"
                    :min="0"
                    :max="999"
                    placeholder="请输入排序值"
                    class="form-input"
                  />
                </el-form-item>
              </div>

              <div class="form-row">
                <el-form-item label="图标" prop="icon" class="form-item">
                  <el-input
                    v-model="form.icon"
                    placeholder="请输入图标名称或路径"
                    class="form-input"
                    clearable
                  />
                </el-form-item>

                <el-form-item label="是否显示" prop="isShow" class="form-item">
                  <el-radio-group v-model="form.isShow" class="radio-group">
                    <el-radio :label="1" class="radio-item">
                      <el-icon><View /></el-icon>
                      显示
                    </el-radio>
                    <el-radio :label="0" class="radio-item">
                      <el-icon><Hide /></el-icon>
                      隐藏
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
          </div>

          <!-- 二级分类关联属性区域 -->
          <div v-if="form.level === 2" class="form-card attribute-card">
            <div class="card-header">
              <el-icon class="card-icon"><Setting /></el-icon>
              <span class="card-title">关联属性</span>
              <span class="attribute-count-badge">
                已选择 {{ selectedAttributesCount }} 个属性
              </span>
            </div>
            <div class="card-content">
              <!-- 属性列表 -->
              <div class="attribute-list">
                <div
                  v-for="attribute in attributeList"
                  :key="attribute.id"
                  class="attribute-item"
                  :class="{ 'attribute-selected': attribute.isSelected === 1 }"
                >
                  <!-- 属性基本信息 -->
                  <div class="attribute-basic-info">
                    <div class="attribute-checkbox-wrapper">
                      <el-checkbox
                        v-model="attribute.isSelected"
                        :true-label="1"
                        :false-label="0"
                        @change="handleAttributeSelection(attribute)"
                        class="attribute-checkbox"
                      />
                      <span class="attribute-name">{{ attribute.name }}</span>
                    </div>

                    <div class="attribute-tags">
                      <el-tag
                        :type="getAttributeTypeTagType(attribute.type)"
                        size="small"
                        class="attribute-tag"
                      >
                        {{ getAttributeTypeLabel(attribute.type) }}
                      </el-tag>
                      <el-tag
                        :type="
                          getAttributeInputTypeTagType(attribute.inputType)
                        "
                        size="small"
                        class="attribute-tag"
                      >
                        {{ getAttributeInputTypeLabel(attribute.inputType) }}
                      </el-tag>
                      <el-tag
                        :type="getIsRequiredTagType(attribute.isRequired)"
                        size="small"
                        class="attribute-tag"
                      >
                        {{ getIsRequiredLabel(attribute.isRequired) }}
                      </el-tag>
                    </div>
                  </div>

                  <!-- 属性值选择区域 -->
                  <div
                    class="attribute-values-section"
                    v-if="
                      attribute.isSelected === 1 &&
                      attribute.inputType !== 1 &&
                      attribute.valueList &&
                      attribute.valueList.length > 0
                    "
                  >
                    <div class="values-header">
                      <span class="values-label">
                        <el-icon><List /></el-icon>
                        选择属性值：
                      </span>
                      <span class="selected-count">
                        已选择
                        {{ (attribute.selectedValuesList || []).length }} 个值
                      </span>
                    </div>
                    <el-checkbox-group
                      v-model="attribute.selectedValuesList"
                      class="values-checkbox-group"
                    >
                      <el-checkbox
                        v-for="value in attribute.valueList"
                        :key="value"
                        :label="value"
                        class="value-checkbox"
                      >
                        {{ value }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" class="cancel-btn">
            <el-icon><Close /></el-icon>
            取消
          </el-button>
          <el-button
            type="primary"
            @click="saveCategory"
            :loading="saving"
            class="save-btn"
          >
            <el-icon v-if="!saving"><Check /></el-icon>
            {{ dialogType === "add" ? "新增" : "保存" }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="分类详情"
      width="1000px"
      class="detail-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <div class="dialog-header">
          <div class="header-icon">
            <el-icon><View /></el-icon>
          </div>
          <div class="header-content">
            <h3 class="dialog-title">分类详情</h3>
            <p class="dialog-subtitle">查看分类的详细信息</p>
          </div>
        </div>
      </template>

      <div v-if="categoryDetail" class="dialog-body">
        <!-- 基本信息卡片 -->
        <div class="detail-card">
          <div class="card-header">
            <el-icon class="card-icon"><InfoFilled /></el-icon>
            <span class="card-title">基本信息</span>
          </div>
          <div class="card-content">
            <el-descriptions :column="2" border class="detail-descriptions">
              <el-descriptions-item label="分类ID" class="detail-item">
                <el-tag type="info" size="small" class="id-tag">{{
                  categoryDetail.id
                }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="分类名称" class="detail-item">
                <span class="detail-value name-value">{{
                  categoryDetail.name
                }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="父级分类ID" class="detail-item">
                <el-tag type="warning" size="small" class="parent-tag">{{
                  categoryDetail.parentId
                }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="层级" class="detail-item">
                <el-tag
                  :type="categoryDetail.level === 1 ? 'primary' : 'success'"
                  size="small"
                  class="level-tag"
                >
                  <el-icon v-if="categoryDetail.level === 1"
                    ><Folder
                  /></el-icon>
                  <el-icon v-else><FolderOpened /></el-icon>
                  {{ categoryDetail.level === 1 ? "一级分类" : "二级分类" }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="排序" class="detail-item">
                <span class="detail-value">{{ categoryDetail.sort }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="图标" class="detail-item">
                <span
                  v-if="categoryDetail.icon"
                  class="detail-value icon-value"
                >
                  <el-icon><Picture /></el-icon>
                  {{ categoryDetail.icon }}
                </span>
                <span v-else class="no-icon">
                  <el-icon><Minus /></el-icon>
                  无
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="是否显示" class="detail-item">
                <el-tag
                  :type="categoryDetail.isShow === 1 ? 'success' : 'danger'"
                  size="small"
                  class="show-tag"
                >
                  <el-icon v-if="categoryDetail.isShow === 1"><View /></el-icon>
                  <el-icon v-else><Hide /></el-icon>
                  {{ categoryDetail.isShow === 1 ? "显示" : "隐藏" }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建人" class="detail-item">
                <span class="detail-value">
                  <el-icon><User /></el-icon>
                  {{ categoryDetail.createdByName || "-" }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间" class="detail-item">
                <span class="detail-value">
                  <el-icon><Clock /></el-icon>
                  {{ categoryDetail.createdTime }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="修改人" class="detail-item">
                <span class="detail-value">
                  <el-icon><User /></el-icon>
                  {{ categoryDetail.modifiedByName || "-" }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="修改时间" class="detail-item">
                <span class="detail-value">
                  <el-icon><Clock /></el-icon>
                  {{ categoryDetail.modifiedTime }}
                </span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>

        <!-- 关联属性卡片 -->
        <div
          v-if="
            categoryDetail.attributeDTOS &&
            categoryDetail.attributeDTOS.length > 0
          "
          class="detail-card attribute-detail-card"
        >
          <div class="card-header">
            <el-icon class="card-icon"><Setting /></el-icon>
            <span class="card-title">关联属性</span>
            <span class="attribute-count-badge">
              共 {{ categoryDetail.attributeDTOS.length }} 个属性
            </span>
          </div>
          <div class="card-content">
            <div class="attributes-table-wrapper">
              <el-table
                :data="categoryDetail.attributeDTOS"
                border
                class="attributes-table"
                :header-cell-style="{ background: '#f8f9fa', color: '#606266' }"
              >
                <el-table-column
                  prop="name"
                  label="属性名称"
                  width="150"
                  class-name="attribute-name-column"
                >
                  <template #default="scope">
                    <div class="attribute-name-cell">
                      <el-icon class="attribute-icon"><Tag /></el-icon>
                      {{ scope.row.name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="属性类型" width="120">
                  <template #default="scope">
                    <el-tag
                      :type="getAttributeTypeTagType(scope.row.type)"
                      size="small"
                      class="attribute-type-tag"
                    >
                      {{ getAttributeTypeLabel(scope.row.type) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="inputType" label="输入类型" width="120">
                  <template #default="scope">
                    <el-tag
                      :type="getAttributeInputTypeTagType(scope.row.inputType)"
                      size="small"
                      class="input-type-tag"
                    >
                      {{ getAttributeInputTypeLabel(scope.row.inputType) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="selectedValues"
                  label="已选择的值"
                  min-width="200"
                >
                  <template #default="scope">
                    <div class="values-display">
                      <el-tag
                        v-for="value in scope.row.selectedValuesList || []"
                        :key="value"
                        size="small"
                        type="success"
                        class="value-tag"
                      >
                        <el-icon class="value-icon"><Check /></el-icon>
                        {{ value }}
                      </el-tag>
                      <span
                        v-if="
                          !scope.row.selectedValuesList ||
                          scope.row.selectedValuesList.length === 0
                        "
                        class="no-values"
                      >
                        <el-icon><Minus /></el-icon>
                        未选择
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="isRequired" label="是否必填" width="100">
                  <template #default="scope">
                    <el-tag
                      :type="scope.row.isRequired === 1 ? 'danger' : 'info'"
                      size="small"
                      class="required-tag"
                    >
                      {{ scope.row.isRequired === 1 ? "是" : "否" }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div v-else class="no-attributes">
          <el-empty description="暂无关联属性" class="empty-state">
            <template #image>
              <el-icon size="60" color="#c0c4cc"><Setting /></el-icon>
            </template>
          </el-empty>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false" class="close-btn">
            <el-icon><Close /></el-icon>
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Plus,
  Search,
  InfoFilled,
  Setting,
  Check,
  Minus,
  List,
  Edit,
  Folder,
  FolderOpened,
  View,
  Hide,
  Close,
  Picture,
  User,
  Clock,
} from "@element-plus/icons-vue";
import { postWithAuth, getWithAuth } from "@/utils/request";

// 类型定义
interface AttributeDTO {
  id: string;
  name: string;
  type: number;
  inputType: number;
  valueList: string[];
  selectedValuesList: string[];
  isRequired: number;
  sort: number | null;
  isSelected: number;
  createdBy: string | null;
  createdByName: string | null;
  createdTime: string | null;
  modifiedBy: string | null;
  modifiedByName: string | null;
  modifiedTime: string | null;
}

interface CategoryDTO {
  id?: string;
  parentId: string | number;
  name: string;
  level: number;
  sort: number;
  icon: string;
  isShow: number;
  createdBy?: string;
  createdByName?: string;
  createdTime?: string;
  modifiedBy?: string;
  modifiedByName?: string;
  modifiedTime?: string;
  attributeDTOS?: AttributeDTO[];
  children?: CategoryDTO[];
}

interface SearchForm {
  name: string;
}

interface Pagination {
  pageIndex: number;
  pageSize: number;
  total: number;
}

interface SimpleAttributeDTO {
  attributeId: number;
  values: string[];
}

// 响应式数据
const loading = ref(false);
const saving = ref(false);
const dialogVisible = ref(false);
const dialogType = ref<"add" | "edit" | "addSub">("add");
const categoryList = ref<CategoryDTO[]>([]);
const formRef = ref();

// 详情相关
const detailDialogVisible = ref(false);
const categoryDetail = ref<CategoryDTO | null>(null);

// 搜索表单
const searchForm = reactive<SearchForm>({
  name: "",
});

// 分页
const pagination = reactive<Pagination>({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
});

// 表单数据
const form = reactive<CategoryDTO>({
  parentId: "0",
  name: "",
  level: 1,
  sort: 0,
  icon: "",
  isShow: 1,
});

// 父级分类选项
const parentCategoryOptions = computed(() => {
  const options = [{ id: "0", name: "顶级分类", level: 0 }];
  const addCategories = (categories: CategoryDTO[]) => {
    categories.forEach((category) => {
      if (category.level === 1) {
        options.push({
          id: category.id as string,
          name: category.name,
          level: category.level,
        });
      }
    });
  };
  addCategories(categoryList.value);
  return options;
});

// 属性相关
const attributeList = ref<AttributeDTO[]>([]);
const selectedAttributes = ref<SimpleAttributeDTO[]>([]);

// 计算已选择的属性数量
const selectedAttributesCount = computed(() => {
  return attributeList.value.filter((attr) => attr.isSelected === 1).length;
});

// 表单验证规则
const rules = {
  name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    {
      min: 2,
      max: 10,
      message: "分类名称长度在 2 到 10 个字符",
      trigger: "blur",
    },
  ],
  level: [{ required: true, message: "请选择层级", trigger: "change" }],
  sort: [{ required: true, message: "请输入排序值", trigger: "blur" }],
  isShow: [{ required: true, message: "请选择是否显示", trigger: "change" }],
};

// 获取分类列表
const fetchCategoryList = async () => {
  loading.value = true;
  try {
    const response = await postWithAuth("/internal/category/pageListByName", {
      name: searchForm.name,
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize,
    });

    if (response.code === 0) {
      categoryList.value = response.data.list;
      pagination.total = parseInt(response.data.total);
    } else {
      ElMessage.error(response.message || "获取分类列表失败");
    }
  } catch (error) {
    console.error("获取分类列表失败:", error);
    ElMessage.error("获取分类列表失败");
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.pageIndex = 1;
  fetchCategoryList();
};

// 重置搜索
const resetSearch = () => {
  searchForm.name = "";
  pagination.pageIndex = 1;
  fetchCategoryList();
};

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.pageSize = size;
  pagination.pageIndex = 1;
  fetchCategoryList();
};

const handleCurrentChange = (page: number) => {
  pagination.pageIndex = page;
  fetchCategoryList();
};

// 打开新增对话框
const openAddDialog = () => {
  dialogType.value = "add";
  dialogVisible.value = true;
  resetForm();
};

// 打开编辑对话框
const openEditDialog = async (row: CategoryDTO) => {
  dialogType.value = "edit";
  dialogVisible.value = true;
  Object.assign(form, {
    id: row.id,
    parentId: row.parentId,
    name: row.name,
    level: row.level,
    sort: row.sort,
    icon: row.icon,
    isShow: row.isShow,
  });

  // 如果是二级分类，获取已关联的属性
  if (row.level === 2) {
    try {
      const response = await getWithAuth(
        `/internal/category/selectForUpdateById?id=${row.id}`
      );
      if (response.code === 0 && response.data.attributeDTOS) {
        const responseAttributes = response.data.attributeDTOS;

        // 重置所有属性的选中状态
        attributeList.value.forEach((attr) => {
          attr.isSelected = 0;
          attr.selectedValuesList = [];
        });

        // 根据isSelected=1选中对应的属性，并设置已选择的属性值
        responseAttributes.forEach((responseAttr: AttributeDTO) => {
          const matchedAttr = attributeList.value.find(
            (attr) => attr.id === responseAttr.id
          );
          if (matchedAttr) {
            matchedAttr.isSelected = responseAttr.isSelected;
            // 设置已选择的属性值
            if (responseAttr.isSelected === 1) {
              matchedAttr.selectedValuesList =
                responseAttr.selectedValuesList || [];
            }
          }
        });
      }
    } catch (error) {
      console.error("获取分类关联属性失败:", error);
      ElMessage.error("获取分类关联属性失败");
    }
  }
};

// 打开添加子分类对话框
const openAddSubDialog = (row: CategoryDTO) => {
  dialogType.value = "addSub";
  dialogVisible.value = true;
  resetForm();
  form.parentId = row.id as string;
  form.level = 2;
};

// 重置表单
const resetForm = () => {
  Object.assign(form, {
    id: undefined,
    parentId: "0",
    name: "",
    level: 1,
    sort: 0,
    icon: "",
    isShow: 1,
  });
  selectedAttributes.value = [];

  // 重置属性列表选择状态
  attributeList.value.forEach((attr) => {
    attr.isSelected = 0;
    attr.selectedValuesList = [];
  });

  formRef.value?.clearValidate();
};

// 保存分类
const saveCategory = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    saving.value = true;

    const url =
      dialogType.value === "add" || dialogType.value === "addSub"
        ? "/internal/category/add"
        : "/internal/category/modify";

    // 构建请求参数
    const requestData: any = {
      parentId: form.parentId,
      name: form.name,
      sort: form.sort,
      icon: form.icon,
    };

    // 对于新增操作添加level
    if (dialogType.value === "add" || dialogType.value === "addSub") {
      requestData.level = form.level;
    }

    // 对于编辑操作添加id和isShow
    if (dialogType.value === "edit") {
      requestData.id = form.id;
      requestData.isShow = form.isShow;
    }

    // 如果是二级分类，构建simpleAttributes参数
    if (form.level === 2) {
      const simpleAttributes: SimpleAttributeDTO[] = [];

      attributeList.value.forEach((attr) => {
        if (attr.isSelected === 1) {
          simpleAttributes.push({
            attributeId: parseInt(attr.id),
            values: attr.selectedValuesList || [],
          });
        }
      });

      requestData.simpleAttributes = simpleAttributes;
    }

    const response = await postWithAuth(url, requestData);

    if (response.code === 0) {
      ElMessage.success(dialogType.value === "edit" ? "修改成功" : "新增成功");
      dialogVisible.value = false;
      fetchCategoryList();
    } else {
      ElMessage.error(response.message || "操作失败");
    }
  } catch (error) {
    console.error("保存分类失败:", error);
    ElMessage.error("保存失败");
  } finally {
    saving.value = false;
  }
};

// 切换显示状态
const toggleShow = async (row: CategoryDTO) => {
  const newShow = row.isShow;
  const actionText = newShow === 1 ? "显示" : "隐藏";

  try {
    await ElMessageBox.confirm(
      `确定要${actionText}分类"${row.name}"吗？`,
      "确认操作",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    const response = await postWithAuth("/internal/category/modify", {
      id: row.id,
      parentId: row.parentId,
      name: row.name,
      sort: row.sort,
      icon: row.icon,
      isShow: newShow,
    });

    if (response.code === 0) {
      ElMessage.success(`${actionText}成功`);
      fetchCategoryList();
    } else {
      ElMessage.error(response.message || `${actionText}失败`);
      // 如果操作失败，恢复原状态
      row.isShow = row.isShow === 1 ? 0 : 1;
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("切换显示状态失败:", error);
      ElMessage.error("操作失败");
      // 如果操作失败，恢复原状态
      row.isShow = row.isShow === 1 ? 0 : 1;
    } else {
      // 用户取消操作，恢复原状态
      row.isShow = row.isShow === 1 ? 0 : 1;
    }
  }
};

// 删除分类
const deleteCategory = async (row: CategoryDTO) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除分类"${row.name}"吗？${
        row.children && row.children.length > 0
          ? "删除后将同时删除其下所有子分类！"
          : ""
      }`,
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    const response = await postWithAuth("/internal/category/delete", {
      id: row.id,
    });

    if (response.code === 0) {
      ElMessage.success("删除成功");
      fetchCategoryList();
    } else {
      ElMessage.error(response.message || "删除失败");
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除分类失败:", error);
      ElMessage.error("删除失败");
    }
  }
};

// 打开详情对话框
const openDetailDialog = async (row: CategoryDTO) => {
  try {
    const response = await getWithAuth(
      `/internal/category/selectById?id=${row.id}`
    );

    if (response.code === 0) {
      categoryDetail.value = response.data;
      detailDialogVisible.value = true;
    } else {
      ElMessage.error(response.message || "获取分类详情失败");
    }
  } catch (error) {
    console.error("获取分类详情失败:", error);
    ElMessage.error("获取分类详情失败");
  }
};

// 处理属性选择
const handleAttributeSelection = (attribute: AttributeDTO) => {
  if (attribute.isSelected === 1) {
    // 初始化selectedValues数组
    if (!attribute.selectedValuesList) {
      attribute.selectedValuesList = [];
    }
  } else {
    // 清除已选择的值
    attribute.selectedValuesList = [];
  }
};

// 获取属性列表
const fetchAttributeList = async () => {
  try {
    const response = await postWithAuth(
      "/internal/attribute/pageListByNameAndType",
      {
        name: "",
        type: "",
        pageIndex: 1,
        pageSize: 1000,
      }
    );

    if (response.code === 0) {
      attributeList.value = response.data.list.map((attr: AttributeDTO) => ({
        ...attr,
        isSelected: 0,
        selectedValues: [],
        // 解析valueList
        valueList: attr.valueList ? attr.valueList : [],
      }));
    } else {
      ElMessage.error(response.message || "获取属性列表失败");
    }
  } catch (error) {
    console.error("获取属性列表失败:", error);
    ElMessage.error("获取属性列表失败");
  }
};

// 属性类型标签类型
const getAttributeTypeTagType = (type: number) => {
  const typeMap: Record<number, string> = {
    1: "success",
    2: "warning",
    3: "info",
  };
  return typeMap[type] || "info";
};

// 属性类型标签
const getAttributeTypeLabel = (type: number) => {
  const typeMap: Record<number, string> = {
    1: "销售属性",
    2: "关键属性",
    3: "普通属性",
  };
  return typeMap[type] || "未知";
};

// 属性输入类型标签类型
const getAttributeInputTypeTagType = (inputType: number) => {
  const inputTypeMap: Record<number, string> = {
    1: "primary",
    2: "success",
    3: "warning",
  };
  return inputTypeMap[inputType] || "info";
};

// 属性输入类型标签
const getAttributeInputTypeLabel = (inputType: number) => {
  const inputTypeMap: Record<number, string> = {
    1: "手工输入",
    2: "从列表中选择",
    3: "多选",
  };
  return inputTypeMap[inputType] || "未知";
};

// 属性是否必填标签类型
const getIsRequiredTagType = (isRequired: number) => {
  const isRequiredMap: Record<number, string> = {
    1: "danger",
    0: "info",
  };
  return isRequiredMap[isRequired] || "info";
};

// 属性是否必填标签
const getIsRequiredLabel = (isRequired: number) => {
  const isRequiredMap: Record<number, string> = {
    1: "必填",
    0: "非必填",
  };
  return isRequiredMap[isRequired] || "未知";
};

// 页面加载时获取数据
onMounted(() => {
  fetchCategoryList();
  fetchAttributeList();
});
</script>

<style scoped>
.product-category {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-content {
  flex: 1;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.page-subtitle {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 500;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

.content-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.search-section {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  width: 250px;
}

.search-icon {
  width: 16px;
  height: 16px;
  color: #909399;
}

.category-table {
  margin: 0;
}

.action-btn {
  margin-right: 8px;
}

.action-btn:last-child {
  margin-right: 0;
}

.action-switch {
  margin-right: 8px;
}

.no-icon {
  color: #909399;
  font-style: italic;
}

.pagination-wrapper {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 详情弹窗样式 */
.detail-content {
  padding: 0;
}

.detail-section {
  margin-bottom: 24px;
  background: #fafbfc;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e8eaec;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.title-icon {
  color: #409eff;
}

.attribute-count-badge {
  margin-left: auto;
  font-size: 12px;
  color: #409eff;
  font-weight: 500;
  background-color: #ecf5ff;
  padding: 4px 8px;
  border-radius: 4px;
}

.detail-descriptions {
  margin-top: 16px;
}

.detail-value {
  font-weight: 500;
  color: #303133;
}

.attributes-table-wrapper {
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attributes-table {
  margin: 0;
}

.attribute-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.attribute-icon {
  color: #409eff;
}

.attribute-type-tag,
.input-type-tag,
.required-tag {
  font-weight: 500;
}

.values-display {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.value-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px;
}

.value-icon {
  font-size: 10px;
}

.no-values {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-style: italic;
}

.no-attributes {
  text-align: center;
  padding: 40px 0;
}

.empty-state {
  padding: 40px 0;
}

/* 属性选择样式 */
.attribute-section {
  background-color: #fafafa;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e4e7ed;
  margin-top: 16px;
}

.attribute-content {
  padding: 0;
}

.attribute-list {
  max-height: 400px;
  overflow-y: auto;
}

.attribute-item {
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.attribute-item:hover {
  background-color: #f0f9ff;
}

.attribute-selected {
  background-color: #f0f9ff;
  border-left: 4px solid #409eff;
}

.attribute-basic-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
}

.attribute-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.attribute-checkbox {
  flex-shrink: 0;
}

.attribute-name {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.attribute-tags {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.attribute-tag {
  font-size: 11px;
  font-weight: 500;
}

.attribute-values-section {
  padding: 12px 16px 16px 40px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-top: 1px solid #e8eaec;
}

.values-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.values-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
  font-weight: 500;
}

.selected-count {
  font-size: 11px;
  color: #409eff;
  background-color: #ecf5ff;
  padding: 2px 6px;
  border-radius: 3px;
}

.values-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.value-checkbox {
  margin: 0;
  font-size: 12px;
}

/* 新增/编辑对话框样式 */
.category-dialog .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

.category-dialog .el-dialog__header .el-dialog__title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.category-dialog .el-dialog__header .el-dialog__headerbtn {
  top: 15px;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.header-icon {
  font-size: 24px;
  color: #409eff;
}

.header-content .dialog-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.header-content .dialog-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #909399;
}

.dialog-body {
  padding: 20px;
}

.form-card {
  background: #fafbfc;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e8eaec;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.card-icon {
  font-size: 20px;
  color: #409eff;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.form-item {
  flex: 1;
  min-width: 300px; /* Ensure items don't shrink too much */
}

.form-input .el-input__inner,
.form-input .el-input-number__inner {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  padding: 8px 12px;
  font-size: 14px;
  color: #303133;
  background-color: #fff;
  transition: border-color 0.3s ease;
}

.form-input .el-input__inner:focus,
.form-input .el-input-number__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-input .el-input__inner::placeholder,
.form-input .el-input-number__inner::placeholder {
  color: #c0c4cc;
}

.form-input .el-input-number__inner {
  width: 100%;
}

.radio-group .el-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
}

.radio-item .el-radio__label {
  font-size: 14px;
  color: #303133;
}

.radio-item .el-radio__input.is-checked .el-radio__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.radio-item .el-radio__input.is-checked + .el-radio__label {
  color: #409eff;
}

.radio-item .el-radio__inner {
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.radio-item .el-radio__inner:hover {
  border-color: #c0c4cc;
}

.radio-item .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}

.cancel-btn .el-button__icon {
  margin-right: 4px;
}

.save-btn .el-button__icon {
  margin-right: 4px;
}

/* 弹窗美化样式 */
.category-dialog,
.detail-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.category-dialog .el-dialog__header,
.detail-dialog .el-dialog__header {
  padding: 0;
  border-bottom: none;
}

.category-dialog .el-dialog__body,
.detail-dialog .el-dialog__body {
  padding: 0;
}

.category-dialog .el-dialog__footer,
.detail-dialog .el-dialog__footer {
  padding: 0;
  border-top: none;
}

/* 弹窗头部 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 0 24px;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  color: white;
  /* margin: -20px -20px 0 -20px; */
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.header-content {
  flex: 1;
}

.dialog-title {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.dialog-subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* 弹窗主体 */
.dialog-body {
  padding: 24px;
  background: #f8f9fa;
  min-height: 400px;
}

/* 表单卡片 */
.form-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e8eaec;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e8eaec;
}

.card-icon {
  color: #409eff;
  font-size: 18px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  flex: 1;
}

.attribute-count-badge {
  font-size: 12px;
  color: #409eff;
  font-weight: 500;
  background-color: #ecf5ff;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #b3d8ff;
}

.card-content {
  padding: 20px;
}

/* 表单布局 */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-item {
  margin-bottom: 0;
}

.form-input {
  width: 100%;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* 详情卡片 */
.detail-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #e8eaec;
}

.attribute-detail-card {
  margin-bottom: 0;
}

.detail-descriptions {
  margin-top: 0;
}

.detail-item {
  padding: 16px;
}

.detail-value {
  font-weight: 500;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 6px;
}

.name-value {
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
}

.id-tag,
.parent-tag,
.level-tag,
.show-tag {
  font-weight: 500;
}

.icon-value {
  color: #67c23a;
}

.no-icon {
  color: #909399;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 弹窗底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e8eaec;
}

.cancel-btn,
.close-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
}

.save-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
  border: none;
}

.save-btn:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #85ce61 100%);
}

/* 属性选择区域美化 */
.attribute-card {
  border: 2px solid #e1f5fe;
  background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
}

.attribute-list {
  max-height: 400px;
  overflow-y: auto;
  border-radius: 8px;
  background: white;
  border: 1px solid #e8eaec;
}

.attribute-item {
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
}

.attribute-item:hover {
  background-color: #f0f9ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.attribute-selected {
  background: linear-gradient(135deg, #f0f9ff 0%, #e1f5fe 100%);
  border-left: 4px solid #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
}

.attribute-basic-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 12px;
}

.attribute-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.attribute-checkbox {
  flex-shrink: 0;
}

.attribute-name {
  font-weight: 600;
  color: #303133;
  font-size: 15px;
}

.attribute-tags {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.attribute-tag {
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
}

.attribute-values-section {
  padding: 16px 20px 20px 52px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%);
  border-top: 1px solid #e8eaec;
  margin-left: 4px;
  border-radius: 0 0 8px 8px;
}

.values-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.values-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

.selected-count {
  font-size: 11px;
  color: #409eff;
  background-color: #ecf5ff;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #b3d8ff;
}

.values-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.value-checkbox {
  margin: 0;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  background: white;
  border: 1px solid #e8eaec;
  transition: all 0.3s ease;
}

.value-checkbox:hover {
  background: #f0f9ff;
  border-color: #409eff;
}

/* 属性表格美化 */
.attributes-table-wrapper {
  margin-top: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.attributes-table {
  margin: 0;
}

.attribute-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.attribute-icon {
  color: #409eff;
}

.attribute-type-tag,
.input-type-tag,
.required-tag {
  font-weight: 500;
  border-radius: 4px;
}

.values-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.value-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px;
  border-radius: 4px;
}

.value-icon {
  font-size: 10px;
}

.no-values {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  font-style: italic;
}

.no-attributes {
  text-align: center;
  padding: 60px 0;
  background: white;
  border-radius: 12px;
  border: 2px dashed #e8eaec;
}

.empty-state {
  padding: 40px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .search-section {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    width: 100%;
  }

  .form-row {
    flex-direction: column;
    gap: 10px;
  }

  .form-item {
    min-width: 100%;
  }

  .radio-group .el-radio {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dialog-header {
    padding: 20px 20px 0 20px;
  }

  .dialog-body {
    padding: 20px;
  }

  .card-content {
    padding: 16px;
  }

  .attribute-basic-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .attribute-tags {
    align-self: stretch;
    justify-content: flex-start;
  }
}
</style>
